<template>
	<div>
		<el-breadcrumb separator-class="el-icon-arrow-right" class="title">
			<span class="title-main">当前位置：</span>
			<el-breadcrumb-item :to="{ path: '../programLib/list' }" class="title-other">方案库</el-breadcrumb-item>
			<el-breadcrumb-item style="color: red !important;">{{title}}</el-breadcrumb-item>
		</el-breadcrumb>
		<div class="picture-pool">
			<div class="main">
				<p class="main-title">{{title}}</p>
				<hr class="main-hr">
				<p class="main-subtitle">{{subtitle}}</p>
				<div class="topdiv">
					<label>方案名称：</label>
					<el-input placeholder="请输入内容" class="topdiv-input" :value="sname" id="sname"></el-input>
					<label class="topdiv-lable">项目名称：</label>
					<el-input placeholder="请输入内容" class="topdiv-input" :value="xname" id="xname"></el-input>
					<el-button type="primary" @click="toMenuAdd" icon="el-icon-circle-plus" class="topdiv-add">新增菜单</el-button>
				</div>
				<div>
					<p class="table-name">菜单列表：</p>
					<table>
						<thead>
							<tr>
								<th style="width: 68px;"><i class="el-icon-edit"></i>全选</th>
								<th style="width: 68px;">序号</th>
								<th style="width: 138px;">图标</th>
								<th style="width: 198px;">菜单名称</th>
								<th style="width: 138px;">子菜单个数</th>
								<th style="width: 348px;">子菜单名称</th>
								<th style="width: 143px;">链接分类</th>
								<th style="width: 208px;">备注</th>
								<th style="width: 128px;">操作</th>
							</tr>
						</thead>
					</table>
					<div class="table-scroll">
						<table cellspacing="0" class="table-height">
							<tbody id="tbodyid">
								<tr v-for="(item,index1) in tableData" v-dragging="{ item: item, list: tableData, group: 'item' }" :key="index1">
									<td style="width: 70px;"><input type="checkbox" class="checkbox" v-bind:value="item.id" /> </td>
									<td style="width: 70px;">{{index1+1}}</td>
									<td style="width: 140px;">
										<div class="picture-item-wrapper">
											<div class="picture"><img class="item-pic" :src="item.image==null?picsrc:'http://172.17.99.10:10014//api/jp-TIFS-FileCenter-ms/file?businessId='+item.image.storeId"  @error="imgError(item.image)" alt=""></div>
										</div>
									</td>
									<td style="width: 200px;">{{item.name}}</td>
									<td style="width: 140px;">{{item.children.length}}</td>
									<td style="width: 350px;">
										<ul class="tableul">
											<li v-for="(subitem,index) in item.children" :class="(index==2&&item.children.length>3)? 'listyle2':'listyle1'" :key="index" v-if="index<3">

												<span class="picture-item-wrapper lispan">
													<span class="picture pic" ><img class="item-pic img" :src="subitem.image==null?picsrc:'http://172.17.99.10:10014//api/jp-TIFS-FileCenter-ms/file?businessId='+subitem.image.storeId"  @error="imgError(item.image)" alt=""></span>
												</span>
												<span>{{subitem.name}}</span>
												<el-button type="text" @click="showDetail(index1)" v-if="item.children.length>3&&index==2" class="libutton">【更多】</el-button>
											</li>
											<li class="linone" v-if="item.children.length==0"></li>
											<li class="linone" v-if="item.children.length==0"></li>
											<li class="linone" v-if="item.children.length==0"></li>
											<li class="linone" v-if="item.children.length==1"></li>
											<li class="linone" v-if="item.children.length==1"></li>
											<li class="linone" v-if="item.children.length==2"></li>
										</ul>
									</td>
									<td style="width: 143px;">
										<ul style="display: flex;flex-direction: column;">

											<!--<li style="flex: 1;border-top: 1px solid #d3d4d6;padding: 20px 70px 20px 70px;">l</li>
											<li style="flex: 1;border-top: 1px solid #d3d4d6;padding: 20px 70px 20px 70px;">1</li>
											<li style="flex: 1;border-top: 1px solid #d3d4d6;padding: 20px 70px 20px 70px;" >1</li>-->

											<li v-for="(subitem,index) in item.children" :key="index" v-if="index<3" class="ulli">
												{{subitem.target}}
											</li>
											<li style="flex: 1;border-top: 1px solid #d3d4d6;padding: 20px 70px 20px 70px;" v-if="item.children.length==0"></li>
											<li class="lione" v-if="item.children.length==0"></li>
											<li class="lione" v-if="item.children.length==0"></li>
											<li class="lione" v-if="item.children.length==0"></li>
											<li class="lione" v-if="item.children.length==1"></li>
											<li class="lione" v-if="item.children.length==1"></li>
											<li class="lione" v-if="item.children.length==2"></li>
										</ul>

									</td>
									<td style="width: 208px;">{{item.remark}}</td>

									<td style="width: 130px;">
										<el-button @click="editRow(index1,item.id)">修改</el-button>
										<el-button @click="deleteRow(item.id)">清除</el-button>
									</td>
								</tr>
							</tbody>

						</table>
					</div>
					<div>
						<div style="margin-top: 30px;">
							<span>显示方式：</span>
							<el-radio v-model="radio" label="1">宫格样式</el-radio>
							<el-radio v-model="radio" label="2" style="margin-left: 100px;">表单样式（横向）</el-radio>
							<el-radio v-model="radio" label="3" style="margin-left: 100px;">表单样式（纵向）</el-radio>
						</div>
						<div style="margin-top: 30px;">
							<span>方案说明：</span>
							<el-input type="textarea" resize="none" class="textarea" id="desc"></el-input>
						</div>
						<div style="margin-top: 55px;text-align: center;">
							<el-button class="bbutton">取消</el-button>
							<el-button class="bbutton" @click="showPreview">预览</el-button>
							<el-button class="bbutton">确定</el-button>
						</div>
					</div>
				</div>
			</div>

		</div>
		<el-dialog title="新增菜单" :visible.sync="dialogVisible1">
			<add-position @AddPositionHandle="AddPositionHandle"></add-position>
		</el-dialog>

		<el-dialog title="预览" :visible.sync="dialogVisible2">
			<div>
				<p>方案名称：{{sname}}</p>
				<p>项目名称：{{xname}}</p>
				<p>方案说明：{{description}}</p>
				<!--  <el-input placeholder="请输入内容" class="topdiv-input"></el-input> -->
			</div>
			<div class="bottomdiv">
				<div class="bottom-left">
					<p class="left-p">方案预览图</p>
				</div>
				<div class="bottom-right">

					<div class="content-div">
						<el-row :gutter="100">
							<el-col :span="8" v-for="(item,index) in piclist" :key="index">
								<div class="grid-content bg-purple">
									<img :src="item.image" height="40" width="36"  @error="imgError(item)" style="z-index:999;">
									<!--   <div class="picture"><img class="item-pic"  alt=""></div> -->
									<p>{{item.title}}</p>
								</div>
							</el-col>
						</el-row>

					</div>
				</div>
			</div>

		</el-dialog>

		<el-dialog :visible.sync="dialogTableVisible">
			<template slot="title">
				<h1 v-if="tableData.length>0">菜单【{{tableData[menuindex].name}}】的子菜单有:</h1>
			</template>
			<el-table v-if="tableData.length>0" :data="tableData[menuindex].children" style="width:100%">
				<el-table-column property="name" label="子菜单名称" width="200"></el-table-column>
				<el-table-column property="target" label="链接分类" ></el-table-column>
			</el-table>
		</el-dialog>
	</div>

</template>

<script>
	import { getTableData } from "@/api/table"
	import AddPosition from "@/components/programLib/AddPosition"
	import { getAllmenu,deleteMenu } from "@/api/menu"
	export default {
		name: "addScheme",
		components: {
			AddPosition
		},
		data() {
			return {
				title: '新增方案',
				subtitle: 'new project',
				sname: '',
				xname: '',
				description: '',
				input: '',
				picsrc:require('../../assets/img/shzats.png'),
				menuindex: 0, //【更多】index
				menudetail: [],
				form: {
					name: '',
					region: '',
					date1: '',
					date2: '',
					delivery: false,
					type: [],
					resource: '',
					desc: ''
				},
				dialogTableVisible: false,
				dialogVisible1: false,
				dialogVisible2: false,
				formLabelWidth: '120px',
				radio: '1',
				tableData: [],
				piclist: []
			};
		},
		methods: {
			changeRouter: function() {

			},
			imgError(item) {
				if(item.storeId){
					item.image = require('../../assets/img/shzats.png');
				}
			},
			toMenuAdd(){
				this.$router.push({
					name: '新增菜单',
					params: {
						menu: {
							name: "新增菜单",
							txt: "New"
						}
					}
				});
			},
			AddPositionHandle(val) {
				for(let i = 0; i < val.length; i++) {
					this.tableData.push(val[i])
				}
				this.dialogVisible1 = false
			},
			handleClose(done) {
				this.$confirm('确认关闭？')
					.then(_ => {
						done();
					})
					.catch(_ => {});
			},
			showDetail: function(index) {
				//定义显示数据
				this.menuindex = index;
				this.dialogTableVisible = true;
			},
			deleteRow: function(id) {
				//提交，成功后,更新数据
				//  alert(index1);
				this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
				}).then(() => {
					deleteMenu(id).then(res=>{
					console.log(res);
					if(res.status==200){
						this.$message({
								type: 'success',
					message: '菜单删除成功！'
						});
						for(var i = 0; i < this.tableData.length; i++) {
							if(this.tableData[i].id == id) {
								this.tableData.splice(i, 1);
							}
						}
					}
					
				}).catch(error=>{
					this.$message('菜单删除失败！请检查是否有子菜单？');
					console.log(error)
				})
				}).catch(() => {
				this.$message({
					type: 'info',
					message: '已取消删除'
				});          
				});
				
			},
			editRow: function(index, id) {
				this.$router.push({
					name: '编辑菜单',
					params: {
						menu: {
							name: "编辑菜单",
							txt: "Edit"
						},
						menuid:id
					}
				})

			},
			showPreview: function() {
				//获取说明
				this.description = $("#desc").val();
				this.xname = $("#xname").val();
				this.sname = $("#sname").val();
				//	console.log(this.description);			
				//获取所有被选中的index
				var indexall = [];
				this.piclist=[];
				$("table input:checkbox:checked").each(function() {
					indexall.push($(this).val());
				})
				for(var i = 0; i < this.tableData.length; i++) {
					for(var j = 0; j < indexall.length; j++) {
						if(this.tableData[i].id == indexall[j]) {
							var param = {};
							if(this.tableData[i].image==null){
								param.image=this.picsrc
							}
							console.log(this.tableData[i]);
							param.image = 'http://172.17.99.10:10014//api/jp-TIFS-FileCenter-ms/file?businessId='+this.tableData[i].image;
							param.title = this.tableData[i].name;
							this.piclist.push(param);
						}
					}
				}
				this.dialogVisible2 = true;
			},
			getSchemeData() {
				// getAllmenu().then(result => {
				// 	var tablelist = [];
				// 	let data = result.data;
				// 	var json = {}; //去重的中间变量
				// 	for(var i = 0; i < data.length; i++) {
				// 		if(data[i]["parentPrivilegeFunction"] == null) {

				// 		} else {
				// 			if(!json[data[i]["parentPrivilegeFunction"].id]) {
				// 				var obj = new Object();
				// 				obj.name = data[i]["parentPrivilegeFunction"].displayname;
				// 				obj.id = data[i]["parentPrivilegeFunction"].id;
				// 				obj.imgsrc = data[i]["parentPrivilegeFunction"].image;
				// 				obj.ps = data[i]["parentPrivilegeFunction"].remark;
				// 				obj.sort = data[i]["parentPrivilegeFunction"].sort;
				// 				obj.children = [];
				// 				var objchild = new Object();
				// 				objchild.name = data[i].name;
				// 				objchild.id = data[i].id;
				// 				objchild.image = data[i].image;
				// 				objchild.type = data[i].displayname;
				// 				obj.children.push(objchild);
				// 				tablelist.push(obj);
				// 				json[obj.id] = 1;
				// 			} else {
				// 				for(var j = 0; j < tablelist.length; j++) {
				// 					if(data[i]["parentPrivilegeFunction"].id == tablelist[j].id) {
				// 						var objchild = new Object();
				// 						objchild.name = data[i].name;
				// 						objchild.id = data[i].id;
				// 						objchild.image = data[i].image;
				// 						objchild.type = data[i].displayname;
				// 						tablelist[j].children.push(objchild);

				// 					}
				// 				}

				// 			}

				// 		}
				// 	}
				// 	console.log(tablelist);
				// 	this.tableData = tablelist;
				// })
			}
		},
		mounted() {
			this.$dragging.$on('dragged', ({
				value
			}) => {
				console.log(value.item)
				console.log(value.list)
				console.log(value.otherData)
			})

		},
		created() {
			if(this.$route.params.title !== undefined) {
				this.title = this.$route.params.title;
				this.subtitle = this.$route.params.subtitle;
				console.log(this.$route.params);
				if(this.$route.params.id !== undefined) {
					this.sname = this.$route.params.sname;
					this.xname = this.$route.params.xname;

					//异步请求数据，填充表格
					this.getSchemeData();
				}
				this.tableData=this.$route.params.list.children;
				this.sname = this.$route.params.list.name;
				this.xname = this.$route.params.list.displayname;
			}
		}

	};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
	* {
		margin: 0;
		padding: 0;
	}
	
	ul li:first-child {
		border-top: none !important;
	}
	
	table,
	table tr th,
	table tr td {
		border: 1px solid #9fa1a0;
		text-align: center;
	}
	
	table tr th {
		height: 43px;
		background-color: #2a323d;
		color: #ffffff;
	}
	
	table tr td {
		height: 125px;
	}
	
	tbody tr {
		height: 125px;
	}
	
	.bottomdiv {
		margin-top: 20px;
		font-size: 16px;
		width: 100%;
		height: 568px;
		.bottom-left {
			float: left;
			width: 100px;
			.left-p {
				display: inline-block;
			}
		}
		.bottom-right {
			float: left;
			width: 100%;
			height: 513px;
			background-image: url(../../assets/img/bg2.png);
			background-size: 100% 100%;
			background-color: #002543;
			color: #D5D8DF;
			.content-div {
				width: 100%;
				height: 489px;
				margin: 0px auto;
				margin-top: 100px;
				.el-row {
					margin-top: 20px;
					margin-bottom: 20px;
					&:last-child {
						margin-bottom: 0;
					}
				}
				.el-col {
					border-radius: 4px;
				}
				//
				.bg-purple-light {
					background: #e5e9f2;
				}
				.grid-content {
					border-radius: 4px;
					// min-height: 123px;
					min-height: 165px;
					width: 193px;
					background-image: url(../../assets/img/kuang-shzats.png);
					background-size: 100% 100%;
					overflow: hidden;
					img {
						display: block;
						// margin: 0 auto;
						margin-left: -40px;
						padding-top: 30px;
						padding-bottom: 10px;
						filter: drop-shadow(120px 0 #93c4ff);
					}
					p {
						text-align: center;
					}
				}
				.row-bg {
					padding: 10px 0;
					background-color: #f9fafc;
				}
			}
		}
	}
	
	.title {
		margin: 0;
		padding: 0;
		margin-bottom: 14px;
		font-weight: 600;
		font-size: 16px;
		.title-main {
			position: relative;
			margin-left: -220px;
		}
		.title-other {
			margin-left: 80px;
		}
	}
	
	.table-scroll {
		height: 503px;
		overflow: scroll;
		width: calc(100% - 77px);
		.table-height {
			max-height: 503px;
			.checkbox {
				height: 16px;
				width: 16px;
				background-color: #ffffff;
			}
			.tableul {
				display: flex;
				flex-direction: column;
				.lispan {
					width: 35px;
					height: 35px;
					float: left;
					margin-top: -4px;
					margin-bottom: -2px;
					.pic {
						width: 35px;
						height: 35px;
						margin-left: 50px;
					}
				}
			}
			.libutton {
				margin-top: 4px;
				float: right;
			}
		}
		#tbodyid {
			position: relative;
			top: 95px;
		}
	}
	
	.table-scroll::-webkit-scrollbar {
		display: none;
	}
	
	.ulli {
		flex: 1;
		border-top: 1px solid #d3d4d6;
		padding: 9px 0;
	}
	
	.lione {
		flex: 1;
		border-top: 1px solid #d3d4d6;
		padding: 20px 70px 20px 70px;
	}
	
	.linone {
		flex: 1;
		border-top: 1px solid #d3d4d6;
		padding: 20px 70px 20px 70px;
	}
	
	.listyle1 {
		flex: 1;
		border-top: 1px solid #d3d4d6;
		padding: 5px 70px 5px 70px;
		/*	padding: 10px 70px 8px 70px;*/
	}
	
	.listyle2 {
		flex: 1;
		border-top: 1px solid #d3d4d6;
		padding: 5px 0px 5px 70px;
	}
	
	.bbutton {
		height: 35px;
		width: 100px;
	}
	
	.textarea {
		height: 75px;
		width: 910px;
		position: absolute;
	}
	
	.picture-pool {
		position: relative;
		width: 1548px;
		height: 948px;
		background-color: #fff;
		.main {
			width: 100%;
			padding: 0 40px;
			.main-title {
				text-align: center;
				padding: 0;
				margin: 0;
				padding-top: 20px;
				font-size: 20px;
				font-weight: 600;
				font-family: SimHei;
			}
			.main-hr {
				height: 2px;
				margin: 0;
				padding: 0;
				margin-top: 2px;
				width: 120px;
				background-color: #d3d3d3;
				border: 0;
				margin-left: calc(50% - 60px);
			}
			.main-subtitle {
				text-align: center;
				color: #d3d3d3;
				margin: 0;
				padding: 0;
				font-size: 8px;
				margin-top: 5px;
				letter-spacing: 1px;
			}
			.topdiv {
				margin-top: 15px;
				font-size: 16px;
				color: #29313e;
				.topdiv-input {
					width: 400px;
				}
				.topdiv-lable {
					margin-left: 238px;
				}
				.topdiv-add {
					width: 110px;
					height: 38px;
					position: absolute;
					right: 40px
				}
			}
			.table-name {
				margin-top: 15px;
				margin-bottom: 15px;
			}
			.picture-item-wrapper {
				width: 100%;
				.picture {
					position: relative;
					left: calc(50% - 50px);
					width: 100px;
					height: 100px;
					/*margin: 14px 20px 12px 20px;*/
					display: flex;
					justify-content: center;
					overflow: hidden;
					user-select: none;
					background-color: #29333d;
					.item-pic {
						position: absolute;
						max-width: 100px;
						max-height: 100px;
						margin: auto;
						margin-left: -120px;
						top: 0;
						bottom: 0;
						border-right: 0 solid transparent;
						filter: drop-shadow(120px 0 #93c4ff);
					}
					.img {
						width: 20px;
						height: 20px;
					}
				}
			}
		}
	}
</style>